<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        body{
            display: flex;
        }
        .form-control {
            width: 265px;
            display: inline-block;
            height: 40px;
        }

        #docAdd {
            width: 350px;
            border-right: 1px gray solid;
            padding: 10px;
        }

        .docShow {
            flex:1;
        }

        .sm {
            width: 62px;
        }

        .mid {
            width: 92px;
        }

        #docAdd h4 {
            text-align: center;
        }

        textarea {
            width: 300px;
        }

        .lh-1 tr {
            height: 50px;
        }
        .btn-sm{
            margin-right: 30px;
        }
    </style>
</head>
<body>
<div id="docAdd">
    <h4>医家信息录入</h4>
    <form id="docForm">
        <table class="lh-1" >
            <tr>
                <td>省：</td>
                <td><select id="prov" name="provName" class="form-control"></select></td>
            </tr>
            <tr>
                <td>市：</td>
                <td><select id="city" name="fk_cid" class="form-control"></select></td>
            </tr>
            <tr>
                <td>县：</td>
                <td><select id="county" name="fk_couId" class="form-control"></select></td>
            </tr>
            </tr>
            <tr>
                <td>朝代：</td>
                <td><select id="dynId" name="fk_dynId" class="form-control"></select></td>

            </tr>
            <tr>
                <td>姓名：</td>
                <td><input name="allName" id="allName" class="form-control"></td>
            </tr>
            <tr>
                <td colspan="2">
                    姓：<input id="docSurname" name="docSurname" class="form-control sm">
                    &nbsp;名：<input id="docName" name="docName" class="form-control sm">
                    &nbsp;字：<input id="docWord" name="docWord" class="form-control sm">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    生年：&nbsp;<input type="number" name="beginYear" id="beginYear" class="form-control mid">

                    &nbsp;&nbsp;&nbsp;卒年：<input type="number" name="endYear" id="endYear"
                                                  class="form-control mid"></td>
            </tr>
            <tr>
                <td>备注：</td>
                <td><textarea name="memo"  rows="8" id="memo" class="form-control"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="right"><input type="button" id="btnAdd" class="btn btn-primary btn-sm"
                                                     value="添加">
                </td>
            </tr>
        </table>
    </form>
</div>
<div class="docShow">
    <table class="table table-hover">
        <tr class="table-active">
            <td>编号</td>
            <td>朝代</td>
            <td>省</td>
            <td>市</td>
            <td>县</td>
            <td>姓</td>
            <td>名</td>
            <td>字</td>
            <td>生年</td>
            <td>卒年</td>
        </tr>
        <tbody id="tbdoc"></tbody>
    </table>
</div>

<!--js代码-->
<script>
    $(function() {
        $("#btnAdd").on("click", function() {
            addDoctor();
        })
        findDoctor()
        findProvince();
        findDynasty();

        $("#prov").on("change", function() {
            findCity(this.value);
        })

        $("#city").on("change", function() {

            findCounty(this.value);
        })
        $("#allName").on("change", function() {
            addName();
        })
        $("#docName").on("change",function (){
            checkDoctor();
        })
        $("#docWord").on("change",function (){
            checkDoctor();
        })
    })

    function addName() {
        let allname = $("#allName").val();
        let len = allname.length;
        let surname;
        let name;
        if(len==4){
            surname=allname.substring(0,2);
            name=allname.substring(2);
        }
        if(len==2||len==3){
            surname=allname.substring(0,1);
            name=allname.substring(1)
        }
        $("#docSurname").val(surname);
        $("#docName").val(name);
        $("#docName").trigger("change");

    }

    function findProvince() {
        $.get(
            "/prov/findProvince",
            function(plist) {
                addSelect("prov", plist, 'pid', 'provName');
                $("#prov").val(17); //默认设置选中河南
                $("#prov").trigger("change");//触发change事件
            }, 'json'
        )
    }

    function findCity(pid) {

        $.get(
            "/city/findCity", {
                pid: pid
            },
            function(clist) {

                addSelect('city', clist, 'cid', 'city');
                $("#city").val(333);
                $("#city").trigger("change");
            }, 'json'
        );
    }

    function findCounty(cid) {
        $.get(
            "/county/findCounty", {
                cityId: cid
            },
            function(clist) {

                addSelect('county', clist, 'couId', 'county');
            }, 'json'
        );
    }

    function findDynasty() {
        $.get(
            "/dynasty/findAllDynasty",
            function(dlist) {
                addSelect("dynId", dlist, 'dynId', 'dynName')
            },
            'json'
        );
    }

    //检查医家是否重复
    function checkDoctor(){
        if($('#docSurname').val()!=null&&$('#docSurname').val()!=''){
            console.log('checkDoctor参数：',$("#docForm").serialize())
            $.get(
                "/doctor/checkDoctor",
                $("#docForm").serialize(),
                function (num){
                    console.log("重复的个数：",num);
                    if(num>0){
                        showMsg($('#allName')+"已经存在！请检查核实！",'重复提示！');
                    }
                }
            )
        }
    }

    function addDoctor(){
        $.post(
            "doctor/addDoctor",
            $("#docForm").serialize(),
            function (n){
                findDoctor();
            }
        )
    }

    function findDoctor() {
        $.get(
            '/doctor/findDoctorDesc',
            function(dlist) {
                let tb = $("#tbdoc");
                tb.empty();
                for (let i in dlist) {
                    let tr = `<tr>
                                   <td>${dlist[i].docId} </td>
                                   <td>${dlist[i].dynName} </td>
                                   <td>${dlist[i].provName} </td>
                                   <td>${dlist[i].city} </td>
                                   <td>${dlist[i].county} </td>
                                   <td>${dlist[i].docSurname}</td>
                                   <td>${dlist[i].docName}</td>
                                   <td>${dlist[i].docWord}</td>
                                   <td>${dlist[i].beginYear} </td>
                                   <td>${dlist[i].endYear} </td>
                                   <td>
                                   <button type="button" onclick="doctorDel(${dlist[i].docId})"
                                    class="btn btn-primary btn-sm" data-toggle="modal" data-target="#docModal">修改</button>

</td>
                                </tr>`;
                    tb.append(tr);
                }
            }, 'json'
        );
    }

    function doctorDel(mid) {
        let del=confirm("你真的要删除这个医家么？");
        if(!del){
            return;
        }
        $.get(
            '/doctor/doctorDel', {
                docId: mid
            },
            function(n) {
                findDoctor();
            }
        );
    }

    //该页面还需要查重功能
</script>
<!-- Modal -->
<div class="modal fade" id="docModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改员工</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="updateDoctorForm" method="post">
                    <input type="text" name="docId">
                    <table class="table table-hover">
                        <tr>
                            <td>姓名</td>
                            <td> <input type="text" onchange="copyUsername(this.value)" name="doc_name"
                                        class="form-control">
                            </td>
                            <td>电话</td>
                            <td> <input type="text" name="doc_tel" class="form-control"></td>
                        </tr>
                        <tr>
                            <td>身份证</td>
                            <td> <input type="text" name="doc_idcard" class="form-control"></td>
                            <td>用户名</td>
                            <td> <input type="text" name="doc_username" class="form-control"></td>
                        </tr>
                        <tr>
                            <td>入职日期</td>
                            <td> <input type="date" name="doc_hiredate" class="form-control"></td>
                            <td>部门</td>
                            <td> <select id="fk_dept_id" name="fk_dept_id" class="form-control"></select></td>
                        </tr>
                        <tr>
                            <td rowspan="2">备注</td>
                            <td rowspan="2">
                                <textarea rows="4" cols="20" name="doc_memo" class="form-control"></textarea>
                            </td>
                            <td>角色</td>
                            <td><select id="fk_role_id" name="fk_role_id" class="form-control"></select></td>
                        </tr>
                    </table>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" onclick="checkIdCard()" class="btn btn-primary"
                        data-dismiss="modal">修改类型</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>